

import { connect } from 'react-redux';
import { NavLink, withRouter } from 'react-router-dom';
import {
    header_left,
    header_item,
    current
} from './index.module.css'

function HeaderLeft(props) {

    const {
        currentItem, 
    } = props;
    const headerItem = [
        {text: '聊天室', current: 'room', toPath: '/room'},
        {text: '个人信息', current: 'info', toPath: '/info'},
    ]


    return (
        <div className={header_left}>
            {
                headerItem.map(v => 
                    <NavLink
                        className={`${header_item} ${currentItem === v.current ? current : ''}`}
                        key={v.current}
                        to={v.toPath}
                        target="_blank"
                    >
                        {v.text}
                    </NavLink>
                )
            }
        </div>
    )
}

function mapStateToProps(state) {
	return {
        currentItem: state.currentItem
	}
}

export default connect(
    mapStateToProps, 
    {
        
    }
)(withRouter(HeaderLeft));